<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进度</title>
</head>

<body>
  <img id="img1" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0" alt="">
  <img id="img2" src="https://en.js.cx/clipart/train666.gif?speed=1&cache=0" alt="">



  <script>
    const img1 = document.getElementById("img1")
    const img2 = document.getElementById("img2")
    window.onload = function () {
      console.log('页面加载完毕');
    }

    img1.onload = function () {
      console.log('图片1已经加载完成');
    }

    img2.onerror = function () {
      console.log('图片2加载错误');
    }

    // window.onbeforeunload = function () {
    //   return false;
    // };


    window.addEventListener("beforeunload", (event) => {
      // 起作用，与在 window.onbeforeunload 中 return 值的效果是一样的
      event.returnValue = "有未保存的值。确认要离开吗？";
    });


  </script>
</body>

</html>